<template>
	<!-- 回收信息 -->
	<view class="RecyclingInformation">
		<view class="empty"></view>
		<view class="main">
			<view class="header">
				<view class="header-left">
					<view class="header-image">
						<image v-if="form.member_info.headimg" :src="form.profilePhoto"></image>
						<image v-else src="@/static/mySelected.png"></image>
					</view>
					<view class="header-main">
						<view class="">
							{{ form.member_info.nickname || form.member_info.mobile }}
						</view>
						<view class="">
							{{ form.create_time }}
						</view>
					</view>
				</view>
				<view class="header-right flexjcc">
					{{ form.role_text }}
				</view>
			</view>
			<view class="main-item">
				<text>回收物品：</text>
				{{ form.title }}

			</view>
			<view class="main-item">
				<text>物品描述：</text>
				{{ form.desc }}

			</view>
			<view class="main-item">
				<text>报价：</text>
				{{ form.price }}
			</view>
			<view class="main-item-image">
				<image :src="image" v-for="image in form.image" :key="image" mode="aspectFit"></image>
			</view>
		</view>
		<view class="footer-button">
			<button @click="dial">拨号联系</button>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			form: {
				member_info: {
					nickname: '',
					headimg: '',
					mobile: '',
				},
				create_time: '',
				// 头像
				profilePhoto: '',
				role_text: '',//身份
				price: '', //价格
				title: '',	// 回收物品
				desc: '',	// 描述
				mobile: '',	// 联系方式
				image: '' //图片
			}
		}
	},
	onLoad(options) {
		this.getInfo(options.id)
	},
	methods: {
		// 获取详情
		getInfo(id) {
			$api.recyclingDetail({ id: id }).then(res => {
				this.form = res.data.data
				let list = this.form.image.split(',')
				list = list.map(item => {
					return this.$image + item
				})
				this.form.image = list
				this.form.profilePhoto = this.$image + this.form.member_info.headimg

			})
		},
		// 联系
		dial() {
			uni.makePhoneCall({
				phoneNumber: this.form.mobile
			})
		}
	}
}
</script>

<style lang="less" scoped>
.RecyclingInformation {
	background: #FBFBFB;

	.empty {
		height: 14rpx;
	}

	.main {
		width: 702rpx;
		// height: 725rpx;
		height: 755rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
		margin: auto;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 31rpx 26rpx 35rpx 25rpx;

			.header-left {
				display: flex;
				align-items: center;
			}

			.header-right {
				width: 96rpx;
				height: 34rpx;
				background: #F14500;
				border-radius: 17rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.header-image {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.header-main {
				padding-left: 19rpx;

				view:first-child {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #1C1C1D;
				}

				view:last-child {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #A4A4A7;
				}
			}
		}

		.main-item {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #A4A4A7;
			// padding-bottom: 26rpx;
			padding: 0 32rpx 26rpx 28rpx;

			text {
				color: #A4A4A7;
			}
		}

		.main-item-image {
			padding-left: 31rpx;

			image {
				width: 628rpx;
				height: 367rpx;
			}
		}
	}

	.footer-button {
		padding-top: 494rpx;

		button {
			width: 702rpx;
			height: 98rpx;
			background: #F14500;
			border-radius: 49rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}
	}
}
</style>